<template>
	<view class="home">
		<view class="header">
			<view class="top">
				<view style="display: flex;">北京 <u-icon name="arrow-down-fill" size="10" ></u-icon></view>
				<u-search shape="round" actionText=""></u-search>
				
			</view>
			<u-tabs :list="lists">
				<template v-slot:right>
					<view style="padding-right: 25px;" @tap="toast">
						<u-icon name="arrow-down" size="21" bold></u-icon>
					</view>
				</template>
			</u-tabs>
		</view>
		<view class="pubu">
			<view class="left">
				<view class="ul">
					<view class="li" v-for="item in leftlist" :key="item.id">

						<image src="/static/5.jpg" class="ttt"  @click="goDetails(item)"></image>
						<view class="nr">
							{{item.name}}
						</view>

						<view class="tx" style="display: flex; justify-content: space-between;">
							<view style="display: flex;">
								<image src="/static/4.jpg" style="width:20px;height: 20px;border-radius: 10px;"   />
								<view style="font-size: 12px;">{{item.ming}}</view>
							</view>
							<view style="display: flex;"  @click="item.flag=!item.flag">
								<view v-if="item.flag"><u-icon name="heart-fill" size="21" color="red"></u-icon></view>
								<view v-else><u-icon name="heart" size="21"></u-icon></view>
								
								<view style="font-size: 12px;">{{item.shu}}</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="right">
				<view class="ul">
					<view class="li" v-for="item in rightlist" :key="item.id">
						<image src="/static/3.jpg" class="tt"  @click="goDetails(item)"></image>
						<view class="nr">
							{{item.name}}
						</view>

						<view class="tx" style="display: flex;justify-content: space-between;">
							<view style="display: flex;">
								<image src="/static/2.jpg" style="width:20px;height: 20px;border-radius: 10px;" />
								<view style="font-size: 12px;">{{item.ming}}</view>
							</view>
							<view style="display: flex;"  @click="item.flag=!item.flag">
								<view v-if="item.flag"><u-icon name="heart-fill" size="21" color="red"></u-icon></view>
								<view v-else><u-icon name="heart" size="21"></u-icon></view>
								
								<view style="font-size: 12px;">{{item.shu}}</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"

	const lists = ref([{
		name: '关注',
	}, {
		name: '推荐',
	}, {
		name: '电影'
	}, {
		name: '科技'
	}, {
		name: '音乐'
	}, {
		name: '美食'
	}, {
		name: '文化'
	}, {
		name: '财经'
	}, {
		name: '手工'
	}])


	const toast = () => {
		uni.showToast({
			icon: 'none',
			title: '插槽被点击'
		})
	}
	//左数据
	const leftlist = reactive([{
			id: 0,
			name: "夏季出行，清凉攻略,走进最舒适的环境",
			shu: 298,
			ming: "小浣熊",
			flag:false
		},
		{
			id: 1,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 289,
			ming: "小浣熊",
			flag:false
		},
		{
			id: 2,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 289,
			ming: "小浣熊",
			flag:false
		},
		{
			id: 3,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 289,
			ming: "小浣熊",
			flag:false
		},
		{
			id: 4,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 289,
			ming: "小浣熊",
			flag:false
		},
		{
			id: 5,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 289,
			ming: "小浣熊",
			flag:false
		},
		{
			id: 6,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 289,
			ming: "小浣熊",
			flag:false
		},

	])
	//右数据
	const rightlist = reactive([{
			id: 0,
			name: "夏季出行，清凉攻略,走进最舒适的环境",
			shu: 297,
			ming: "小熊熊",
			flag:false
		},
		{
			id: 1,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag:false
		},
		{
			id: 2,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag:false
		},
		{
			id: 3,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag:false
		},
		{
			id: 4,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag:false
		},
		{
			id: 5,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag:false
		},
		{
			id: 6,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag:false
		},
		{
			id: 7,
			name: "夏季出行，清凉攻略，走进最舒适的环境",
			shu: 279,
			ming: "小熊猫",
			flag:false
		},

	])

	const click = (item) => {
		console.log('item', item);
	}
	
	const goDetails=(item)=>{
		uni.navigateTo({
				url:"/pages/details/details?item=",
			})
	}	
</script>

<style scoped lang="scss">
	.home{
		padding: 20rpx;
		box-sizing: border-box;
		overflow-x: hidden;
		.header {
			background: #ffffff;
					height: 200rpx;
					width: 100%;
					position: fixed;
					top:0rpx;
					.top{
					margin-top: 40rpx;
					display:flex;
					width: 600rpx;
					align-items: center;
		}
		}
		.pubu {
			margin-top: 180rpx;
			width: 100vw;
			height: auto;
			/* background: red; */
			display: flex;
		}
		
		.left {
			width: 46vw;
			height: auto;
			margin-right: 2vw;
		
			/* background: #d14328; */
		
		}
		
		.left .ul {
			width: 100%;
			height: auto;
		}
		
		.left .ul .li {
			font-size: 14px;
			width: 100%;
			height: auto;
			/* background: bisque; */
			overflow: hidden;
		
		}
		
		.right {
			width: 46vw;
			height: auto;
			/* background: blueviolet; */
		}
		
		.right.ul {
			width: 100%;
			height: auto;
		}
		
		.right .ul .li {
			font-size: 14px;
			width: 100%;
			height: auto;
			/* background: rgb(212, 176, 131); */
		}
		
		.tx {
			width: 100%;
			height: 40px;
			box-sizing: border-box;
			padding: 0px 10px;
			margin-top: 10px;
			/* background: #d14328; */
		}
		
		.nr {
			box-sizing: border-box;
			padding: 0px 10px;
		}
		
		.ttt {
			width: 100%;
			height: 220px;
		}
		
		.tt {
			width: 100%;
			height: 200px;
		}
	}
</style>